<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>测试</title>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/dedeajax2.js"></script>
</head>
<body>

<div>
    <ul>
        <li style="list-style: none;margin: 20px" th:each="rootComment:${commentVOList}">
            <div style="position: relative;margin-top: 10px;margin-bottom: 10px">
                <div style="top: 0;left: 0;font-family: 'Microsoft Yahei',Arial,sans-serif;height: 50px;width: 50px;display: inline-block">
                    <img th:src="${rootComment.getUserAndComment().getUser().getAvatar()}"
                         style="display: block;width: 50px;height: 50px;border: 0;border-radius: 25px"></div>
                <div style="height: auto;width: auto;display: inline-block;margin-left: 5px">
                    <span style="font-size: 12px;color: #FB7299;font-weight: bold;line-height: 18px;padding-bottom: 4px"
                          th:text="${rootComment.getUserAndComment().getUser().getName()}"></span>
                    <br>
                    <span style="font-size: 14px;color: #222;line-height: 20px;padding: 2px 0"
                          th:text="${rootComment.getUserAndComment().getComment().getMessage()}"></span>
                    <br>
                    <span style="font-size: 12px;color:#99a2aa;line-height: 25px"
                          th:text="${#dates.format(rootComment.getUserAndComment().getComment().getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}"></span>
                    <span>
                        <img src="/img/like.svg" style="margin-left: 10px;height: 15px;width: 15px"/>
                    <span style="font-size: 12px;color:#99a2aa;line-height: 14px;margin-left: 0"
                    th:text="${rootComment.getUserAndComment().getLike()}"></span>
                    </span>
                    <span style="font-size: 12px;color:#99a2aa;line-height: 14px;margin-left: 10px"
                          onclick="">回复</span>
                </div>
            </div>
            <ul>
                <li th:each="comment:${rootComment.getCommentList()}" style="list-style: none">
                    <div style="position: relative;margin-top: 10px;margin-bottom: 10px">
                        <div style="height: 24px;width: 24px;display: inline-block">
                            <img th:src="${comment.getUser().getAvatar()}"
                                 style="display: block;width: 24px;height: 24px;border-radius: 25px">
                        </div>
                        <div style="height: auto;width: auto;display: inline-block;margin-left: 5px">
                        <span th:text="${comment.getUser().getName()}"
                              style="font-size: 12px;font-weight: bold;line-height: 18px;color: #9499A0;padding: 2px 0"></span>
                            <span th:text="${comment.getComment().getMessage()}"
                                  style="font-size: 14px;color: #222;line-height: 20px;margin-left: 20px;margin-top: 10px;margin-bottom: 10px"></span>
                            <br>
                            <span th:text="${#dates.format(comment.getComment().getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}"
                                  style="font-size: 12px;color:#99a2aa;line-height: 25px;"></span>
                            <span onclick="">
                                <img src="/img/like.svg"
                                     style="margin-left: 10px;height: 15px;width: 15px"/>
                            <span style="font-size: 12px;color:#99a2aa;line-height: 14px;margin-left: 0"
                            th:text="${comment.getLike()}"></span>
                            </span>
                            <span style="font-size: 12px;color:#99a2aa;line-height: 14px;margin-left: 10px"
                                  onclick="">回复</span>
                        </div>
                        <br>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>